<template>
  <div class="fillin">
    <!-- 剪辑版 Telephone -->
    <div class="telephone">
      <h3>问卷地址</h3>
      <div class="a">
        <h6>将问卷地址粘贴发给填表者！</h6>
        <el-input v-model="this.$store.state.address" disabled></el-input>
        <el-button
          type="primary"
          class="btn"
          v-clipboard:copy="this.$store.state.address"
          v-clipboard:success="onCopy"
          >复制网址</el-button
        >
      </div>
    </div>

    <div class="main">
      <div class="imgs"></div>
      <div>
        <h1>{{ this.$store.state.findDataId.formName }}</h1>
        <h5>{{ this.$store.state.findDataId.formDes }}</h5>
        <div
          v-for="(item, key) in this.$store.state.findDataId.formItem"
          :key="key"
        >
          <!-- 单选的div -->
          <div v-if="item.type == 'radio'" class="radio">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-radio-group v-model="item.id">
              <ul
                v-for="(item, key) in item.option"
                :key="'radio' + key"
                :label="key"
              >
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 -->
                  <el-radio :label="key" disabled>{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 多选 -->
          <div v-else-if="item.type == 'multiple'" class="multiple">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <ul v-for="(item, key) in item.option" :key="key">
              <el-checkbox disabled>{{ item.text }}</el-checkbox>
            </ul>
          </div>
          <!--下拉选择-->
          <div v-else-if="item.type == 'select'" class="select">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <!--<h1>{{item}}</h1>-->
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in item.option"
                :key="item.txet"
                :label="item.text"
                :value="item.text"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 填空的div -->
          <div v-else-if="item.type == 'completion'" class="completion">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input v-model="item.option[0].def" disabled />
            </el-row>
          </div>
          <!-- 简答题 -->
          <div v-else-if="item.type == 'field'" class="field">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input type="textarea" v-model="item.option[0].def" disabled />
            </el-row>
          </div>
          <!-- 数字的div -->
          <div v-else-if="item.type == 'number'" class="number">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input v-model="item.option[0].def" disabled />
            </el-row>
          </div>
          <!-- 图片单选 -->
          <div v-else-if="item.type == 'imgSingle'" class="imgSingle">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <div class="left_imgs">
              <div
                class="ysimgs"
                v-for="(item1, index1) in item.option"
                :key="index1"
              >
                <img
                  :src="imgsUrl + item1.imageurl"
                  width="130px"
                  height="200px"
                />
                <br />
                <el-radio-group>
                  <el-radio disabled :label="index1 + 1"></el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <!--姓名-->
          <div v-else-if="item.type == 'name'" class="name">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <!-- <h1>{{item.tipsColor}}</h1> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input type="textarea" v-model="item.option.def" disabled />
            </el-row>
          </div>
          <!--性别-->
          <div v-else-if="item.type == 'gender'" class="gender">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-radio-group v-model="item.id">
              <ul
                v-for="(item, key) in item.option"
                :key="'radio' + key"
                :label="key"
              >
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 -->
                  <el-radio :label="key" disabled>{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 年龄 -->
          <div v-else-if="item.type == 'age'" class="age">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-radio-group v-model="item.id">
              <ul
                v-for="(item, key) in item.option"
                :key="'radio' + key"
                :label="key"
              >
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 -->
                  <el-radio :label="key" disabled>{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!-- 学历 -->
          <div v-else-if="item.type == 'education'" class="education">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定字体的颜色-->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-radio-group v-model="item.id">
              <ul
                v-for="(item, key) in item.option"
                :key="'radio' + key"
                :label="key"
              >
                <li>
                  <!-- 这里的v-model是一定需要绑定一个对象 -->
                  <el-radio :label="key" disabled>{{ item.text }}</el-radio>
                </li>
              </ul>
            </el-radio-group>
          </div>
          <!--手机-->
          <div v-else-if="item.type == 'iphone'" class="iphone">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <!-- <h1>{{item.tipsColor}}</h1> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input type="textarea" v-model="item.option.def" disabled />
            </el-row>
          </div>
          <!-- 邮箱 -->
          <div v-else-if="item.type == 'email'" class="email">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <!-- <h1>{{item.tipsColor}}</h1> -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input type="textarea" v-model="item.option.def" disabled />
            </el-row>
          </div>
          <!-- 电话 -->
          <div v-else-if="item.type == 'mobile'" class="mobile">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-input type="textarea" v-model="item.option.def" disabled />
            </el-row>
          </div>
          <!--生日-->
          <div v-else-if="item.type == 'birthday'" class="birthday">
            <h3><strong style="color: red">*</strong>{{ item.title }}</h3>
            <!-- 绑定颜色 -->
            <h5 v-bind:style="[JSON.parse(item.tipsColor)]">{{ item.tips }}</h5>
            <el-row>
              <el-date-picker
                type="date"
                v-model="item.option.def"
                disabled
                placeholder="请选择日期"
              />
            </el-row>
          </div>
        </div>
      </div>
      <!-- 保存提交的按钮 -->
    </div>
    <!-- <div class="bottom">
      <el-button class="button" type="primary">提交</el-button>
    </div> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "fillin",
  data() {
    return {
      value: "",
      // 图片拼接的地址,页面接受的
      imgsUrl: "",
    };
  },
  methods: {
    onCopy() {
      window.alert("复制成功,请将问卷地址发给填表者！");
    },
  },
  created() {
    this.imgsUrl = this.$root.imgsurl;
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.fillin {
  background-color: #f5ecfd;
}
.telephone {
  height: 200px;
  width: 300px;
  position: fixed;
  background-color: #ffffff;
  text-align: left;
  padding: 10px;
  box-shadow: 2px 2px 2px 2px gray;
}
.telephone > .a {
  margin-top: 20px;
}
.telephone > .a > h6 {
  color: gray;
  margin-bottom: 10px;
}
.btn {
  height: 40px;
  width: 70px;
  margin-top: 10px;
}
.main {
  width: 40vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.main .imgs {
  flex: 0 0 10vw;
  background-image: url("/static/imgs/users/main.jpg");
}
.main div:nth-child(2) {
  flex: 0 0 auto;
  background-color: #ffffff;
  text-align: left;
  margin-top: 10px;
  padding: 20px;
}
.radio,
.multiple,
.completion,
.field,
.number,
.select,
.imgSingle,
.name,
.gender,
.age,
.education,
.iphone,
.email,
.mobile,
.birthday {
  margin-top: 10px;
}
/*
.button {
  width: 6vw;
  height: 4vh;
  text-align: center;
  margin-top: 3vh;
  margin-bottom: 3vh;
}*/

.left_imgs {
  display: flex;
  width: 100%;
}
.left_imgs .ysimgs {
  padding: 0;
  margin: 0;
}
.left_imgs .ysimgs:nth-child(2) {
  padding: 0;
  margin: 0;
}
</style>